<template>
    <div>
        <div class="tip-box" :style=" 'animation-duration:'+time+'s;' ">{{ msg }}</div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            msg: "翩若惊鸿，婉若游龙!",
            time:3
        };
    }
};
</script>

<style scoped>
.tip-box {
    position: fixed;
    top: 0px;
    left: 50%;
    transform: translate(-50%, -100%);
    opacity: 0;
    background-color: #1a17176b;
    color: white;
    padding: 10px 20px;
    border-radius: 20px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    animation-name: showTip;
    animation-duration: 3s;
}
@keyframes showTip {
    0% {
        transform: translate(-50%, -100%);
        opacity: 0;
    }
    20% {
        transform: translate(-50%, 50%);
        opacity: 1;
    }
    80% {
        transform: translate(-50%, 50%);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -100%);
        opacity: 0;
    }
}
</style>